import axios from 'axios';
import {
    Loading
} from 'element-ui'

let loadingRequestCount = 0;
const showLoading = () => {
    if (loadingRequestCount === 0) {
        //  element的服务方式 target 我这边取的是表格 项目是后台系统 每个页面都有表格 类似整个表格loading
        // 和在表格配置v - loading一样的效果， 这么做是全局实现了， 不用每个页面单独去v - loading
        loadingInstance = Loading.service({
            target: '.el-table',
            lock: true,
            text: '加载中……',
            background: 'rgba(0, 0, 0, 0.7)'
        });
    }
    loadingRequestCount++
}
const hideLoading = () => {
    if (loadingRequestCount <= 0) return
    loadingRequestCount--
    if (loadingRequestCount === 0) {
        vue.$nextTick(() => { //以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
        });
    }
}

const service = axios.create({
    // process.env.NODE_ENV === 'development' 来判断是否开发环境
    // easy-mock服务挂了，暂时不使用了
    baseURL: 'http://192.168.1.43:8088/socialMall/admin/admin',
    timeout: 10000
});

service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let CancelToken = axios.CancelToken;
let source = CancelToken.source();

service.interceptors.request.use(
    config => {

        config.cancelToken = source.token // 取消请求
        if (config.cancelToken && config.cancelObj && config.cancelObj.cancel) {
            config.cancelObj.cancel('中断请求');
            delete config.cancelObj;
        }
        if (!navigator.onLine) { // 断网提示
            source.cancel('网络故障，请检查!')
        }

        // 请求拦截进来调用显示loading效果
        // showLoading()

        // 配置了store持久化的就不需要取localstorage的了
        // // const token = store.state.token || localStorage.getItem('authentication');
        // const token = localStorage.getItem('authentication');
        // console.log("TCL: token", token)
        // // token && (config.headers.authentication = token);
        // config.headers.authentication = token
        return config;
    },
    error => Promise.error(error)
)

service.interceptors.response.use(
    // 请求成功
    res => {
        
        //   响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
        //  合并loading请求效果 避免重复请求

        setTimeout(() => {
            hideLoading()
        }, 200);

        // if (res.headers.token) { //保存token
        //     // store.commit('SET_TOKEN', res.headers.token);
        //     // 同理配置了store持久化的就不需要localstorage的了
        //     // localStorage.setItem("token", res.data.token);
        //     localStorage.setItem('authentication', response.headers.authentication)
        // }

        return res.status === 200 ? Promise.resolve(res.data) : Promise.reject(res.data)
    },
    // 请求失败情况
    error => {

        //   响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
        //  合并loading请求效果 避免重复请求

        setTimeout(() => {
            hideLoading()
        }, 200);


        const {
            response
        } = error;
        if (response) {
            // 请求已发出，但是不在2xx的范围 
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 处理其他的情况
            if (error.message) { // 取消请求的message
                // tip(error.message)
            } else {
                // tip('服务故障，请检查！')
            }
            return Promise.resolve()
        }
    });

export default service;